<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/blog_content.css">
</head>

<body>
    <!-- 导航栏 -->
    <div class="nav">
        <img src="img/logo2.jpg" alt="">
        <span class="title">我的博客系统</span>
        <!-- 用来占据中间位置 -->
        <span class="spacer"></span>
        <a href="blog_list.html">主页</a>
        <a href="blog_edit.html">写博客</a>
        <a href="logout">注销</a>
    </div>
    <!-- 版心 -->
    <div class="container">
        <!-- 左侧个人信息 -->
        <div class="container-left">
            <div class="card">
                <img src="img/doge.jpg" class="avtar" alt="">
                <h3>Dklau</h3>
                <a href="http:www.github.com">github 地址</a>
                <div class="counter">
                    <span>文章</span>
                    <span>分类</span>
                </div>
                <div class="counter">
                    <span>2</span>
                    <span>1</span>
                </div>
            </div>
        </div>
        <div class="container-right">
            <div class="blog-content">
        <!-- 博客标题 -->
        <h3>我的第一篇博客</h3>
        <!-- 博客时间 -->
        <div class="date">2021-06-02</div>
        <!-- 博客正文 -->
        <p>
            从今天起我要好好敲代码.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut recusandae
            omnis natus ut! Autem alias
            ullam sit facilis ipsa dolore, molestiae neque aperiam in a facere dolor
            mollitia dolorum animi.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut recusandae
            omnis natus ut! Autem alias
            ullam sit facilis ipsa dolore, molestiae neque aperiam in a facere dolor
            mollitia dolorum animi.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut recusandae
            omnis natus ut! Autem alias
            ullam sit facilis ipsa dolore, molestiae neque aperiam in a facere dolor
            mollitia dolorum animi.
        </p>
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium sint
            accusantium, enim iste
            corrupti itaque, omnis alias maiores nemo quae rerum deleniti facere
            officiis iure velit. Blanditiis
            pariatur delectus perferendis.
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium sint
            accusantium, enim iste
            corrupti itaque, omnis alias maiores nemo quae rerum deleniti facere
            officiis iure velit. Blanditiis
            pariatur delectus perferendis.
        </p>
    </div>
        </div>
    </div>
    
</body>

</html>